document.addEventListener('DOMContentLoaded', function() {
    // 导航栏滚动效果
    const header = document.querySelector('header');
    window.addEventListener('scroll', function() {
        if (window.scrollY > 10) {
            header.classList.add('header-sticky', 'shadow-md');
        } else {
            header.classList.remove('header-sticky', 'shadow-md');
        }
    });

    // 移动端菜单切换
    const menuToggle = document.getElementById('menu-toggle');
    const mobileMenu = document.getElementById('mobile-menu');

    if (menuToggle && mobileMenu) {
        menuToggle.addEventListener('click', function() {
            mobileMenu.classList.toggle('hidden');
        });
    }

    // 搜索框交互
    const searchInput = document.querySelector('input[placeholder="搜索商品、品牌或分类..."]');
    const searchIcon = document.querySelector('.fa-search');

    if (searchInput && searchIcon) {
        searchIcon.addEventListener('click', function() {
            searchInput.focus();
        });
    }

    // 用户菜单下拉
    const profileBtn = document.getElementById('profile-btn');
    const profileDropdown = document.getElementById('profile-dropdown');

    if (profileBtn && profileDropdown) {
        profileBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            profileDropdown.classList.toggle('hidden');
        });

        document.addEventListener('click', function() {
            profileDropdown.classList.add('hidden');
        });
    }

    // 初始化通知系统
    initNotifications();

    // 初始化轮播图
    initCarousels();
});

// 通知系统
function initNotifications() {
    const notificationContainer = document.createElement('div');
    notificationContainer.id = 'notification-container';
    notificationContainer.className = 'fixed top-20 right-4 z-50 flex flex-col space-y-3 max-w-xs';
    document.body.appendChild(notificationContainer);
}

function showNotification(message, type = 'info', duration = 3000) {
    const notificationContainer = document.getElementById('notification-container');
    if (!notificationContainer) return;

    const notification = document.createElement('div');
    notification.className = `notification-enter flex items-center p-4 rounded-lg shadow-lg transition-all duration-300 transform translate-x-full opacity-0`;

    // 设置通知类型样式
    switch(type) {
        case 'success':
            notification.classList.add('bg-success/10', 'text-success', 'border-l-4', 'border-success');
            notification.innerHTML = `
                <i class="fa fa-check-circle text-xl mr-3"></i>
                <div>
                    <p class="font-medium">成功</p>
                    <p>${message}</p>
                </div>
            `;
            break;
        case 'error':
            notification.classList.add('bg-danger/10', 'text-danger', 'border-l-4', 'border-danger');
            notification.innerHTML = `
                <i class="fa fa-times-circle text-xl mr-3"></i>
                <div>
                    <p class="font-medium">错误</p>
                    <p>${message}</p>
                </div>
            `;
            break;
        case 'warning':
            notification.classList.add('bg-warning/10', 'text-warning', 'border-l-4', 'border-warning');
            notification.innerHTML = `
                <i class="fa fa-exclamation-triangle text-xl mr-3"></i>
                <div>
                    <p class="font-medium">警告</p>
                    <p>${message}</p>
                </div>
            `;
            break;
        default: // info
            notification.classList.add('bg-primary/10', 'text-primary', 'border-l-4', 'border-primary');
            notification.innerHTML = `
                <i class="fa fa-info-circle text-xl mr-3"></i>
                <div>
                    <p class="font-medium">提示</p>
                    <p>${message}</p>
                </div>
            `;
    }

    notificationContainer.appendChild(notification);

    // 触发动画
    setTimeout(() => {
        notification.classList.remove('translate-x-full', 'opacity-0');
    }, 10);

    // 自动关闭
    setTimeout(() => {
        notification.classList.add('notification-exit', 'translate-x-full', 'opacity-0');
        setTimeout(() => {
            notification.remove();
        }, 300);
    }, duration);

    // 点击关闭
    notification.addEventListener('click', () => {
        notification.classList.add('notification-exit', 'translate-x-full', 'opacity-0');
        setTimeout(() => {
            notification.remove();
        }, 300);
    });
}

// 轮播图初始化
function initCarousels() {
    // 通过 ID 获取轮播图容器
    const carousel = document.getElementById('carousel');
    if (!carousel) return;

    // 获取幻灯片
    const slideContainer = carousel.querySelector('.flex');
    const slides = carousel.querySelectorAll('.min-w-full');
    const indicators = carousel.querySelectorAll('.carousel-dot');
    const prevBtn = document.getElementById('prev-btn');
    const nextBtn = document.getElementById('next-btn');

    if (!slides.length || !indicators.length || !prevBtn || !nextBtn) return;

    let currentIndex = 0;
    const slideCount = slides.length;

    // 设置轮播图宽度
    slideContainer.style.width = `${slideCount * 100}%`;
    slides.forEach(slide => {
        slide.style.width = `${100 / slideCount}%`;
    });

    // 更新轮播图位置
    function updateCarousel() {
        slideContainer.style.transform = `translateX(-${currentIndex * (100 / slideCount)}%)`;

        // 更新指示器
        indicators.forEach((indicator, index) => {
            if (index === currentIndex) {
                indicator.classList.add('bg-primary');
                indicator.classList.remove('bg-white/50');
            } else {
                indicator.classList.remove('bg-primary');
                indicator.classList.add('bg-white/50');
            }
        });
    }

    // 下一张
    function nextSlide() {
        currentIndex = (currentIndex + 1) % slideCount;
        updateCarousel();
    }

    // 上一张
    function prevSlide() {
        currentIndex = (currentIndex - 1 + slideCount) % slideCount;
        updateCarousel();
    }

    // 点击指示器切换
    indicators.forEach((indicator, index) => {
        indicator.addEventListener('click', () => {
            currentIndex = index;
            updateCarousel();
        });
    });

    // 按钮事件
    nextBtn.addEventListener('click', nextSlide);
    prevBtn.addEventListener('click', prevSlide);

    // 自动轮播
    let autoplayInterval = setInterval(nextSlide, 5000);

    // 鼠标悬停暂停自动轮播
    carousel.addEventListener('mouseenter', () => {
        clearInterval(autoplayInterval);
    });

    // 鼠标离开恢复自动轮播
    carousel.addEventListener('mouseleave', () => {
        autoplayInterval = setInterval(nextSlide, 5000);
    });

    // 初始化
    updateCarousel();
}